<template>
  <div class="contain-body abfa-box">
    <Title></Title>
    <div class="search-contain-body">
      <el-form ref="form" inline :model="form" label-width="75px">
        <el-form-item>
          <div class="d-ib font-table" slot="label">方案名称：</div>
          <el-input v-model="form.schemeName"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="d-ib font-table" slot="label">活动时间：</div>
          <el-date-picker type="date" placeholder="选择日期" v-model="form.date" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <div class="d-ib font-table" slot="label">活动名称：</div>
          <el-input v-model="form.activityName"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="d-ib font-table" slot="label">活动地点：</div>
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <div class="d-ib font-table" slot="label">活动类型：</div>
          <el-select v-model="form.shape" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" class="button-search" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>

    </div>
    <div>
      <div class="pos-r">
        <Title msg="信息列表"></Title>
        <div class="pos-a" style="right: 0">
          <el-button @click="openOptions('add')" type="primary" icon="el-icon-plus">
            新增
          </el-button>
        </div>
      </div>
      <CustomTable
          :columns="columns"
          :table-data="tableData">
        <div slot="options" slot-scope="scope">
          <el-button @click="downDetails()" style="margin-left: 4px;" class="button-blur">详情</el-button>
          <el-button @click="openOptions('edit')" style="margin-left: 4px;" class="button-green">编辑</el-button>
          <el-button @click="deleteDate" style="margin-left: 4px;" class="button-red">删除</el-button>
        </div>
      </CustomTable>
    </div>

    <el-dialog
        width="819px"
        center
        :class="['custom-dialog-fill','font-table']" title="活动审批"
        :visible.sync="dialog.open">

      <div class="dialog-title" slot="title">
        {{ dialog.title }}
      </div>

      <div class="d-f jc-c">

        <el-form
            class="font-table "
            style="color: #000000;"
            ref="form" :model="form"
            label-width="75px">
          <el-form-item>
            <div class="d-ib font-table" slot="label">方案名称：</div>
            <el-input v-model="form.schemeName"></el-input>
          </el-form-item>
          <div class="d-f jc-c form-security">
            <el-form-item>
              <div class="d-ib font-table" slot="label">活动名称：</div>
              <el-input v-model="form.activityName"></el-input>
            </el-form-item>
            <el-form-item>
              <div class="d-ib font-table" slot="label">活动时间：</div>
              <el-date-picker type="date" placeholder="选择日期" v-model="form.date" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </div>
          <div class="d-f jc-c form-security">
            <el-form-item>
              <div class="d-ib font-table" slot="label">活动地点：</div>
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <div class="d-ib font-table" slot="label">活动类型：</div>
              <el-select v-model="form.shape" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item v-if="dialog.type=='add'">
            <div class="d-ib font-table" slot="label">方案预览：</div>
            <div class="mb-14 d-f jc-between scheme-preview">
              <el-input v-model="form.bigEvent">
                <el-button slot="append">预览</el-button>
              </el-input>
              <el-button
                  class="button-submit">上传
              </el-button>
            </div>
            <div class="d-f font-table">
              <div class="abfa-add d-f cur-p" style="margin:0 40px 32px 0;">
                <div class="add-attachment"></div>
                <div>添加附件</div>
              </div>
              <div class="abfa-add d-f cur-p">
                <div class="add_photos"></div>
                <div>照片</div>
              </div>
            </div>
          </el-form-item>
          <el-form-item v-if="dialog.type!='add'">
            <div class="d-ib font-table" slot="label">方案预览：</div>
            <div class="mb-14">
              <el-input type="textarea" :rows="6" v-model="form.bigEvent"></el-input>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="d-f jc-c">
        <div v-if="dialog.type=='details'">
          <el-button
              class="button-cancel"
              @click="dialog.open = false">取 消
          </el-button>
        </div>
        <div v-if="dialog.type!='details'">
          <el-button
              class="button-cancel"
              @click="dialog.open = false">取 消
          </el-button>
          <el-button
              class="button-submit mr58"
              @click="dialog.open = false">确 定
          </el-button>
        </div>
      </div>

    </el-dialog>

  </div>
</template>

<script>
import Title from "../../components/Title";
import CustomTable from "../../components/CustomTable";

export default {
  name: "Abfa",
  components: {Title, CustomTable},
  data() {
    return {
      dialog: {
        title: 's',
        open: false,
        type: 'details',//'edit','add','details'
      },
      form: {
        name: '',
        schemeName: '',
        activityName: '',
        region: '',
        date: '',
        bigEvent: '',
        shape: '',
        approval: '',
        desc: '',
        remark: ''
      },
      tableData: [
        {
          '方案名称': '612视讯会议安保方案',
          '活动时间': '2021-06-12 18：00！22：00',
          '活动地点': '2021群星观展',
          '活动名称': '合川县人民广场',
          '活动类型': '文艺演出'
        },
        {
          '方案名称': '608展销安保方案',
          '活动时间': '2021-06-12 18：00！22：00',
          '活动地点': '农机展销会',
          '活动名称': '合川县人民广场',
          '活动类型': '文艺演出'
        },
        {
          '方案名称': '910观影会安保方案',
          '活动时间': '2021-06-12 18：00！22：00',
          '活动地点': '2021群星观展',
          '活动名称': '合川县人民广场',
          '活动类型': '文艺演出'
        },
      ],
      columns: [
        {
          key: '方案名称',
          label: '方案名称'
        },
        {
          key: '活动时间',
          label: '活动时间'
        },
        {
          key: '活动名称',
          label: '活动名称'
        },
        {
          key: '活动地点',
          label: '活动地点'
        },
        {
          key: '活动类型',
          label: '活动类型'
        },
        {
          key: 'options',
          label: '操作',
          width: '243px',
          slot: true
        }
      ],
    }
  },
  mounted() {
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    },
    downDetails(params) {
      this.$message({
        type: 'success',
        message: '下载成功'
      });
    },
    openOptions(params) {
      this.dialog.type = params
      if (params == 'add') {
        this.dialog.title = '新增方案'
      }
      if (params == 'edit') {
        this.dialog.title = '安保方案编辑'
      }
      this.dialog.open = true
    },
    deleteDate() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '关闭',
        type: ''
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style lang="scss">
.abfa-box {
  .mb-14 {
    margin-bottom: 14px;
  }

  .mr111 {
    margin-right: 111px;
  }

  .mr58 {
    margin-right: 58px;
  }

}


.abfa-add {
  color: #436AA3;
  line-height: 17px;

  span {
    display: inline-block;
  }
}

.add-attachment {
  background-image: url("../../assets/imgs/add_attachment.svg");
  background-size: 17px 17px;
  background-position: 0 1px;
  background-repeat: no-repeat;
  width: 17px;
  height: 17px;
  display: inline-block;
}

.add_photos {
  background-image: url("../../assets/imgs/add_photos.svg");
  background-size: 17px 17px;
  background-position: 0 1px;
  background-repeat: no-repeat;
  width: 17px;
  height: 17px;
  display: inline-block;
}

.scheme-preview {
  .el-input-group {
    width: 430px;
  }

  .button-submit {
    padding: 6px 22px;
  }
}

.custom-dialog-fill {
  .form-security {
    .el-form-item__content {
      width: 205px !important;
    }
  }

}

</style>

